<style>
    .wd300{
        width: 300px;
    }
</style>
<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" data-table-id="MenuTable" style="height:400px;">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('省市区')}</label>
            <div class="layui-input-block" style="display:flex;">
                <select name="province" required lay-filter="province" id="province"  class="wd300">
                    <option value="">请选择省份</option>
                    {volist name="province" id="v"}
                     <option value="{$v.area_code }"  {if($vo["province"] == $v["area_code"])} selected="selected"  {/if}>{$v.name}</option>
                    {/volist}
                </select>
                <select name="city" required lay-filter="city" id="city" class="wd300">
                    <option value="">请选择城市</option>
                    {volist name="city" id="v"}
                     <option value="{$v.area_code }"  {if($vo["city"] == $v["area_code"])} selected="selected"  {/if}>{$v.name}</option>
                    {/volist}
                  </select>
                <select name="district" required lay-filter="district" id="district" class="wd300">
                    <option value="">请选择区域</option>
                    {volist name="district" id="v"}
                     <option value="{$v.area_code }"  {if($vo["district"] == $v["area_code"])} selected="selected"  {/if}>{$v.name}</option>
                    {/volist}
                </select>
            </div>
         </div>
        <input type="hidden" name="jxs_code" value='{$vo.jxs_code|default=""}'  />
    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>{:lang('保存数据')}</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="{:lang('确定要取消编辑吗？')}" data-close>{:lang('取消编辑')}</button>
    </div>
</form>


<script>

      // 省份下拉菜单更新
      form.on('select(province)', function(data){
          $.ajax({
              url:"{:url('ajax_city')}",
              data:{id:data.value,jxs_code:{$vo.jxs_code|default=""},city:1},
              type:"get",
              success:function(ret){
                  var cityOptions='';
                  var cities=JSON.parse(ret);
                  cities.forEach(function(city){
                     cityOptions += '<option value="' + city.area_code + '">' + city.name + '</option>';
                  });
                  $('#city').html(cityOptions);
                  form.render('select');
                  if(cities.length > 0){
                      $.ajax({
                          url:"{:url('ajax_city')}",
                          data:{id:cities[0].area_code,jxs_code:{$vo.jxs_code|default=""},"city":0},
                          type:"get",
                          success:function(ret){
                              var cityOptions='';
                              var cities=JSON.parse(ret);
                                 cities.forEach(function(city){
                                 cityOptions += '<option value="' + city.area_code + '">' + city.name + '</option>';
                              });
                              $('#district').html(cityOptions);
                              form.render('select');
                          }
                        })
                  }
                  
              }
          })
      });
 
      // 城市下拉菜单更新
      form.on('select(city)', function(data){
        
        $.ajax({
          url:"{:url('ajax_city')}",
          data:{id:data.value,jxs_code:{$vo.jxs_code|default=""},"city":0},
          type:"get",
          success:function(ret){
              var cityOptions='';
              var cities=JSON.parse(ret);
                 cities.forEach(function(city){
                 cityOptions += '<option value="' + city.area_code + '">' + city.name + '</option>';
              });
              $('#district').html(cityOptions);
              form.render('select');
          }
        })
      });
</script>














